<template>
<div>


  <el-table
    ref="multipleTable"
    :data="tableData"
    highlight-current-row
    @selection-change="handleCurrentChange"
    :header-cell-style="headerCellStype"
    style="width: 100%"
    tooltip-effect="dark"
    border
  >

    <el-table-column type="selection" > </el-table-column>
    <el-table-column  v-for="item in tableHead"  :label= "item.label" :prop="item.porp"
    :key="item.label"
      :show-overflow-tooltip="tooltip">
      
   <template slot-scope="scope" >
        <div class="button-row" v-if="item.type == 'button'">
          <el-button  type="success" v-if="item.button && item.button.update" @click="$emit('modification',true,scope.row)">修改</el-button>
          <el-button type="dangr" v-if="item.button && item.button.delete" @click="$emit('delect',scope.row.id)">删除</el-button>
        </div>

        
       <!-- <div class="img-row" v-else-if="item.type =='img' "> -->
          <!-- {label:'',prop:'',,type:'',button:{ update:true,delete:true},imagur:'',images:[1,2]}
            <el-image 
                  style="width: 100px; height: 100px"
                  v-if="item.imgclick"
                  :src="item.formatter ? item.formatter(scope.row,scope.row[item.prop]) : scope.row[item.prop]" 
                  :preview-src-list="scope.row[item.prop]">
            </el-image> -->
                  <!-- <el-avatar 
                  v-else
                  shape="square" :size="100" :fit="fit" 
                  :src="item.formatter ? item.formatter(scope.row[item.prop]) 
                  : scope.row[item.prop]"></el-avatar> -->

          <!-- </div>   -->
         <!-- <el-switch
        v-if="item.type=='switch'"
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            >
          </el-switch> -->
          <div class="text" v-else>
            {{scope.row[item.prop]}}

          </div>
          
    </template>
    
    </el-table-column>
  </el-table>
  </div>
  
</template>

<script>

export default {
  props: {

    tableData: {
      type: Array,
      default: () => [],
    },
    tableHead: {
      type: Array,
      default: () => [],
    },
  
    headerCellStype: {
      type: Object,
      default: () => {
        return {
          fontSize: "14px",
          background: "#f4f4f4",
        };
      },
    },
      tooltip: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange',val)
      // console.log("val=", val);
    },
  },
};
</script>

<style>
.el-button{
  padding: 12px 8px;
}
.el-table__header{
  width: 100%;
}
.el-table__body{
  width: 100%;
}
colgroup{
  width: 100%;
}
</style>